<!--  -->
<template>
  <div class="box">子组件
   {{ props.user.name }}

   {{ props.msg }}

   <button @click="send">给父组件传值</button>
  </div>
</template>

<script lang='ts' setup>
import { reactive,toRefs,ref,defineProps,defineEmits} from 'vue'

//数组
// const props= defineProps(['user']);
//对象
// const props= defineProps({
//   user:{
//     type:Object,
//     required: true,
//      default:{name:"李四"}
//   },
//   msg:{
//     type:String
//   }
// }); 


interface User{
  name:string,
  mobile:string
}
interface DataType{
   user:User,
   msg:string
}
//withDefaults给props添加默认值  进行类型校验
//基本数据类型  引用数据类型（复杂数据类型）
const props= withDefaults(defineProps<DataType>(),{
  msg:"你好",
  user:()=>({name:"王五",mobile:"138"})

})

let news=ref({id:10,title:"您好"});

const emit=defineEmits(["sendTo"]);

const send=()=>{

   emit("sendTo",news.value)
}

</script>
<style scoped>
.box{width: 100%;
height: 300px;
background: skyblue;
}
</style>